<template>
  <view class="hot-section">
    <view class="section-header">
      <text class="section-title">{{ title }}</text>
<!--      <u-icon name="flame-fill" color="#f56c6c" size="28"></u-icon>-->
    </view>
    <view class="hot-list">
      <swiper vertical autoplay circular :interval="3000" class="hot-swiper">
        <swiper-item v-for="(item, index) in hotTopics" :key="index">
          <view class="hot-item">
            <text class="hot-rank">{{ index + 1 }}</text>
            <text class="hot-title">{{ item.title }}</text>
<!--            <u-icon :name="item.icon" size="26" :color="getHotIconColor(index)"></u-icon>-->
          </view>
        </swiper-item>
      </swiper>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue';

// 定义Props
defineProps({
  title: {
    type: String,
    default: '吃瓜热榜'
  }
});

// 热榜数据
const hotTopics = ref([
  { title: "为什么现在的爱情比以前的...", icon: "emoji" },
  { title: "能不能来人开户 有偿", icon: "smile" },
  { title: "今天天气真不错，适合约会", icon: "sun" },
  { title: "程序员下班后都在做什么？", icon: "code" }
]);

// 获取热榜图标颜色
const getHotIconColor = (index: number) => {
  return index === 0 ? '#f56c6c' : index === 1 ? '#ff9800' : index === 2 ? '#409eff' : '#909399';
};
</script>

<style lang="scss" scoped>
.hot-section {
  background: #fff;
  border-radius: 16rpx;
  width: 650rpx;
  margin: 20rpx;
  padding: 15rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);

  .section-header {
    display: flex;
    align-items: center;
    margin-bottom: 25rpx;

    .section-title {
      font-size: 22rpx;
      font-weight: bold;
      color: #303133;
      margin-right: 15rpx;
    }
  }
  .hot-list {
    height: 60rpx;
    overflow: hidden;

    .hot-swiper {
      height: 100%;
    }

    .hot-item {
      display: flex;
      align-items: center;
      height: 100%;

      .hot-rank {
        width: 44rpx;
        height: 44rpx;
        background: #f56c6c;
        color: #fff;
        font-size: 26rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 8rpx;
        margin-right: 20rpx;
        font-weight: bold;
      }

      .hot-title {
        flex: 1;
        font-size: 30rpx;
        color: #303133;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }
}
</style>